<template>
  <div class="header">
    <h4>用户列表</h4>
    <el-button type="primary" @click="isShowFn">添加</el-button>
  </div>
  <!-- 添加用户 -->

    <el-form  label-width="10px" style="max-width: 450px"  v-show="isShow">
      <el-form-item>
        <el-input v-model="addAdminObj.name" placeholder="用户名" />
      </el-form-item>

      <el-form-item>
        <el-input v-model="addAdminObj.password" placeholder="密码" />
      </el-form-item>

      <el-form-item>
        <el-input v-model="addAdminObj.email" placeholder="邮箱" />
      </el-form-item>

      <el-form-item prop="resource">
        <el-radio-group v-model="addAdminObj.gender">
          <el-radio label="男" />
          <el-radio label="女" />
          <el-radio label="保密" />
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-input v-model="addAdminObj.mobile" placeholder="手机号" />
      </el-form-item>

      <el-button type="primary">取消</el-button>
      <el-button type="primary" @click="addFn">确定</el-button>
    </el-form>

  <!-- </div> -->



  <!-- 用户列表 -->

  <el-table :data="userInfoArr" style="width: 100%">

    <!-- 序号 -->
    <el-table-column fixed prop="id" label="序号" width="100">
      <template #default="scope">
        <div style="display: flex; align-items: center;justify-content:center;">
          <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
        </div>
      </template>
    </el-table-column>

    <!-- 用户名 -->
    <el-table-column prop="name" label="用户名" width="100">
      <template #default="scope">
        <div style="display: flex; align-items: center; justify-content:center;">
          <span>{{ scope.row.username }}</span>
        </div>
      </template>
    </el-table-column>

    <!-- 手机号 -->
    <el-table-column prop="mobile" label="手机号" width="100">
      <template #default="scope">
        <div style="display: flex; align-items: center; justify-content:center;">
          <span>{{ scope.row.mobile }}</span>
        </div>
      </template>
    </el-table-column>

    <!-- 邮箱 -->
    <el-table-column prop="email" label="邮箱" width="100">
      <template #default="scope">
        <div style="display: flex; align-items: center; justify-content:center;">
          <span>{{ scope.row.email }}</span>
        </div>
      </template>
    </el-table-column>

    <!-- 性别 -->
    <el-table-column prop="gender" label="性别" width="100">
      <template #default="scope">
        <div style="display: flex; align-items: center; justify-content:center;">
          <el-tag class="ml-2" :type="scope.row.gender == 1 ? 'danger' : 'success'">{{ gender[Number(scope.row.gender) -
            1]
          }}</el-tag>
        </div>
      </template>
    </el-table-column>

    <!-- 状态 -->
    <el-table-column prop="status" label="状态" width="100">
      <template #default="scope">
        <div style="display: flex; align-items: center; justify-content:center;">
          <el-tag class="ml-2" :type="scope.row.status == 1 ? 'success' : 'danger'">{{ scope.row.status == 1 ? '正常' : '禁用'
          }}</el-tag>
        </div>
      </template>
    </el-table-column>

    <!-- 操作 -->
    <el-table-column fixed="right" label="操作" width="150">
      <template #default>
        <div class="options">
          <el-button type="primary" @click="handleClick">编辑</el-button>
          <el-button type="primary" @click="deleteClick">删除</el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页组件 -->
  <el-pagination v-model:page-size="pageSize" v-model:current-page="currentPage" background layout="prev, pager, next"
    :total="totalNum" />
</template>

<script setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'

import { getUsersData, getAddUsers } from '@/api/https.js'
import { ref, reactive, watchEffect } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const addAdminObj = reactive({
  name: '',
  password: '',
  email: '',
  mobile: '',
  gender:''
})

// 显示add
const isShow = ref(false)
// // 当前页
const currentPage = ref(1)
// 每页条数
const pageSize = ref(10)
// 总数
const totalNum = ref(0)

const userInfoArr = ref([])

const gender = ref(['男', '女', '保密'])


watchEffect((currentPage) => {
  getUsersData({ page: currentPage.value }).then(res => {
    console.log('userdata', res);
    if (res.data.errNo == 0) {
      userInfoArr.value = res.data.paginate.data
      totalNum.value = res.data.paginate.total
      pageSize.value = res.data.paginate.per_page
      res.data.paginate.current_page = currentPage.value
    }
  })
})
// getUsersData({ page: currentPage}).then(res => {
//     console.log('userdata', res);
//     if (res.data.errNo == 0) {
//       userInfoArr.value = res.data.paginate.data
//       totalNum.value = res.data.paginate.total
//       currentPage.value = res.data.paginate.current_page
//       pageSize.value = res.data.paginate.per_page
//     }
//   })

// 显示
const isShowFn = () => {
  isShow.value = !isShow.value
}

const addFn =()=>{
  getAddUsers({
    username:addAdminObj.name,
    password:addAdminObj.password,
    email:addAdminObj.email,
    gender:addAdminObj.gender,
    mobile:addAdminObj.mobile,
  }).then(res => {
    console.log('adminadd', res);
    if (res.data.code == 200) {

    }
  })
}

// 编辑用户
const handleClick = () => {
  isShow.value = !isShow.value
}
// 删除
const deleteClick = () => {
  ElMessageBox.alert('是否删除用户?', {
    confirmButtonText: 'OK',
    callback: () => {
      ElMessage({
        type: 'info',
        message: `删除成功`,
      })
    },
  })
}


</script>
 
<style scoped>

.el-form {
  border: 1px solid black;
  /* padding: 50px; */
  /* position: ; */
  left: 50%;
  top: 50%;
  text-align: center;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ebedf0;
  width: 100%;
  height: 70px;
  padding: 0 30px;
  margin-right: 30px;
  box-sizing: border-box;
}

.options {
  display: flex;
  align-items: center;
}
</style>